﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="../js/echarts.js"></script>
</head>
<body bgcolor="#000000">
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 450px;height:450px;background-color:#000000;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));        
        // 指定图表的配置项和数据
       // option = ;
        myChart.setOption(option, true);
        function getData(a,b) {
           // option.series[0].data[0].value = a;//(Math.random() * 100).toFixed(2) - 0;
            myChart.setOption({
                tooltip: {
                    formatter: "{a} <br/>{b} : {c}%"
                },
                toolbox: {
                    feature: {
                        // restore: {},
                        //  saveAsImage: {}
                    }
                },
                series: [
                    {
                        name: '业务指标',
                        type: 'gauge',
                        center: ['50%', '50%'],
                        // startAngle: 90,
                        // endAngle: -140,

                        min: 0,
                        max: 100,
                        axisLine: {            // 坐标轴线
                            show: true,        // 默认显示，属性show控制显示与否
                            lineStyle: {       // 属性lineStyle控制线条样式
                                color: [[0.2, '#ff4500'], [0.5, 'orange'], [0.8, 'skyblue'], [1, 'lightgreen']],
                                width: 30
                            }
                        },
                        pointer: {
                            length: '80%',
                            width: 8,
                            color: 'auto'
                        },
                        title: {
                            show: true,
                            offsetCenter: ['-5%', 205],       // x, y，单位px
                            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                color: '#fff',
                                fontSize: 38
                            }
                        },
                        axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
                            show: true,
                            formatter: function (v) {
                                switch (v + '') {
                                    case '0': return '0';
                                    case '10': return '10';
                                    case '20': return '20';
                                    case '30': return '30';
                                    case '40': return '40';
                                    case '50': return '50';
                                    case '60': return '60';
                                    case '70': return '70';
                                    case '80': return '80';
                                    case '90': return '90';
                                    case '100': return '100';
                                    default: return '';
                                }
                            },
                            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                color: '#fff',
                                fontSize: 20
                            }
                        },
                        detail: {
                            show: true,
                            backgroundColor: 'rgba(0,0,0,0)',
                            borderWidth: 0,
                            borderColor: '#ccc',
                            width: 100,
                            height: 40,
                            offsetCenter: ['-0%', 140],       // x, y，单位px
                            formatter: '{value}%',
                            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                color: 'auto',
                                fontSize: 40
                            }
                        },
                        //  detail: { formatter: '{value}%' },
                        data: [{ value: a, name: b }]
                    }
                ]
            }, true);
            window.onresize = myChart.resize;
        }
    </script>
</body>
</html>